import React from 'react';
import AdSense from 'react-adsense';
import { Link } from 'umi';
import DynamicChartComponent from './DynamicChartComponent.js';

const MainPageComponent = () => {
    return (
        <div>
            <h1> echarts-for-react {this.props.params.type} </h1>
            <h3>
                {' '}
                A very simple echarts(v3.0) wrapper for React.{' '}
                <a href="https://github.com/hustcc/echarts-for-react">hustcc/echarts-for-react</a>
            </h3>

            <AdSense.Google client="ca-pub-7292810486004926" slot="7806394673" />

            <h4>
                <Link to="/echarts/simple">Simple demo</Link> |
                <Link to="/echarts/loading">Echarts loading</Link> |
                <Link to="/echarts/api">Echarts API</Link> |
                <Link to="/echarts/events">Echarts events</Link> |
                <Link to="/echarts/theme">Echarts theme</Link> |
                <Link to="/echarts/dynamic">Dynamic chart</Link> |
                <Link to="/echarts/map">Map chart</Link>
            </h4>
            <h4>
                <span style={{ color: 'red' }}>New</span>
                :&nbsp;&nbsp;
                <Link to="/echarts/airport">Airport</Link> |<Link to="/echarts/graph">Graph</Link> |
                <Link to="/echarts/calendar">Calendar</Link> |
                <Link to="/echarts/treemap">Treemap</Link> |<Link to="/echarts/gauge">Gauge</Link> |
                <Link to="/echarts/gcalendar">GCalendar</Link> |
                <Link to="/echarts/lunar">Lunar</Link> |<Link to="/echarts/liquid">Liquidfill</Link>
            </h4>
            {this.props.children || <DynamicChartComponent />}

            <h3>
                Get it on GitHub!{' '}
                <a href="https://github.com/hustcc/echarts-for-react">hustcc/echarts-for-react</a>
            </h3>
        </div>
    );
};

export default MainPageComponent;
